<template>
  <div class="bottom_bar">
    <div :class="{ 'bar_item': true, 'cur': index === '1' }">
      <span class="item_icon index_icon" @click="index === '1' || $router.push({path: '/userHome'})"/>
      <a href="#">首页</a></div>
    <div :class="{ 'bar_item': true, 'cur': index === '2' }">
      <span class="item_icon appoinment_icon" @click="index === '2' || $router.push({path: '/userAppoint'})"/>
      <a href="#">预约</a></div>
    <div :class="{ 'bar_item': true, 'cur': index === '3' }">
      <span class="item_icon order_icon" @click="index === '3' || $router.push({path: '/userOrder'})"/>
      <a href="#">订单</a></div>
    <div :class="{ 'bar_item': true, 'cur': index === '4' }">
      <span class="item_icon myself_icon" @click="index === '4' || $router.push({path: '/userCenter'})"/>
      <a href="#">我的</a></div>
  </div>
</template>

<script>
  export default {
    name: 'TarBar',
    props: {
      index: {
        required: true,
        type: String
      }
    },
    mounted(){
    }
  }
</script>

<style scoped>
  @import "../../assets/css/iconfont.css";
  @import "../../assets/css/login_selfcenter.css";
  @import "../../assets/css/index_appointment.css";
  @import "../../assets/css/reset.css";
</style>
